<template>
  <div  style="height: 785px;">

    <!--主体内容-->
    <el-row :gutter="0" style="background-color:white;text-align: left;margin: -20px">
      <el-col :span="24" :offset="0" style="border-bottom: 1px solid #CCC">
        <el-button type="text" @click="goback"><  还款</el-button>
      </el-col>
    </el-row>


    <el-card class="box-card" style="margin-left: -20px;margin-right: -20px;text-align: left">
      <div style="margin-bottom: 10px;">还款本金</div>
      <el-input placeholder="请输入金额" v-model="input1" style="margin-bottom: 10px;" @change="chang()" id="inputId">
        <template slot="prepend">￥</template>
      </el-input>
      <div>未还本金 {{ money1 }} 元，可全部归还或只还部分</div>
    </el-card>


    <el-form ref="form" :model="form1" label-width="80px" label-position="top">
      <el-card class="box-card" style="margin-top:20px;margin-bottom:20px;text-align: left"><!--margin-top: 10px;padding-top:-35px;-->
        <el-row :gutter="0" style="border-bottom: 1px solid black;line-height: 40px">
          <el-col :span="19" :offset="0" style="">
            利息
          </el-col>
          <el-col :span="5" :offset="0" style="text-align: right">
            {{ money2 }}
          </el-col>
        </el-row>
        <el-row :gutter="0" style="border-bottom: 1px solid black;line-height: 40px">
          <el-col :span="19" :offset="0" style="">
            手续费
          </el-col>
          <el-col :span="5" :offset="0" style="text-align: right">
            {{ money3 }}
          </el-col>
        </el-row>
        <el-row :gutter="0" style="line-height: 40px">
          <el-col :span="18" :offset="0" style="">
            还款总额
          </el-col>
          <el-col :span="6" :offset="0" style="text-align: right">

            <el-form-item  label="" style="border: none">
              <el-input v-model="money"  placeholder="" style="" id="inputId" disabled="disabled"></el-input>
            </el-form-item>

          </el-col>
        </el-row>
      </el-card>



      <el-form-item>
        <el-button type="primary" @click="onSubmit" style="width: 430px;height: 50px">确定</el-button>
      </el-form-item>
      <input type="button" value="get请求" @click="onSubmit">
    </el-form>



  </div>
</template>

<script>
  import axios from 'axios'
    export default {
      name: "repaymentReal",
      data() {
        return {
          day:0,
          money:0,
          money1:0,
          money2:0,
          money3:0,
          input1: 0,
          form1: {
            input2: '5056.00',
          }
        };
      },
      methods: {
        chang(){
          this.money=(parseFloat(this.input1)+parseFloat(this.input1*0.0005*this.day));
          this.money2 = this.input1*0.0005*this.day;
        },
        goback:function(){
          this.$router.push("/repayment")
        },
        onSubmit() {
          // alert("测试");
          console.log('submit!');
          alert(this.$route.query.loanapplicationId+"============"+this.input1+"-"+this.money2+"-"+this.money);
          var str1 = this.input1+"";
          var str2 = this.money2+"";
          var str3 = this.money+"";
          /*axios.post("http://localhost:9999/credit-repayment/realRepayment",{input1:str1,money2:str2,money:str3}).then(res=>{
            alert("返回了")
            this.$router.push({ path:'/pay'  })
          });*/
          /*axios.post("http://localhost:9999/credit-pay/pay").then(res=>{
            alert("返回了222")
          });*/

          this.$http.get('http://localhost:8015/pay')
            .then((success) => {
              alert("成功返回了")
              console.log(success);
            }, (error) => {
              alert("失败返回了")
              console.log(error);
            });
          /*this.$http.post('http://localhost:8015/hello', {}, {})
            .then(success => {
              alert("成功返回了")
              console.log(success);
            });*/
          /*this.$http.jsonp('http://localhost:8015/hello')
            .then(result => {
              console.log(result);
            });*/
          // http://localhost:8015/pay
          //http://localhost:9999/credit-pay/pay
          //http://localhost:8080/#/pay

          // this.$router.push("/repayment")
        },
        findTime:function () {
          axios.post("http://localhost:9999/credit-repayment/dates",{id:1}).then(res=>{
            // alert(res.data.message)
            this.day= res.data.message;
          })
        }
      },
      mounted(){

        this.findTime()
      }
    }
</script>

<style scoped>
  #inputId{
    /*border: 2px solid red;*/
    /*outline:none;*/ /*outline:medium;border:0;border-width: 0;
    border: 1px solid #fff !important;

    outline-color: invert;
    outline-style: none;
    outline-width: 0px;
    border: none;
    border-style: none;
    text-shadow: none;
    -webkit-appearance: none;
    -webkit-user-select: text;
    outline-color: transparent;
    box-shadow: none;*/

    border: 0 none;

    border-bottom: 1px solid #ccc;

    border-radius: 0px;
  }
</style>
